<template>
    <a-badge dot>
        <a-tooltip title="消息通知">
            <a-popover placement="bottom" trigger="click">
                <template #title>
                    <div style="display: flex;justify-content: space-between;align-items: center;height: 40px;">
                        <a-badge :count="data.length" :offset="[6, 2]">
                            <p style="font-size: 17px;">消息中心</p>
                        </a-badge>
                        <a-button type="link" size="small" @click="handleClear">清空</a-button>
                    </div>
                </template>
                <template #content>
                    <Simplebar class="scrollbarWrap" data-simplebar-auto-hide="false">
                        <a-list item-layout="horizontal" :data-source="data">
                            <template #renderItem="{ item, index }">
                                <a-list-item>
                                    <a-list-item-meta>
                                        <template #title>
                                            <div style="display: flex;justify-content: space-between;">
                                                <a-tooltip title="点击设为已读">
                                                    <a-button @click="handleUpdate(item, index)" type="text"
                                                        size="small">
                                                        <h3
                                                            :style="{ textDecoration: item.status === 1 ? 'line-through' : '' }">
                                                            {{ item.title
                                                            }}
                                                        </h3>
                                                    </a-button>
                                                </a-tooltip>
                                                <a-tag color="error" :bordered="false">即将到期</a-tag>
                                            </div>
                                        </template>
                                        <template #description>
                                            <p
                                                :style="{ textDecoration: item.status === 1 ? 'line-through' : '' }">
                                                {{ item.content }}</p>
                                        </template>
                                    </a-list-item-meta>
                                </a-list-item>
                            </template>
                        </a-list>
                        <a-divider></a-divider>
                        <div class="msg-footer">
                            <a-button type="link" size="small" @click="handleAllRead">全部已读</a-button>
                            <a-divider type="vertical"></a-divider>
                            <a-button type="link" size="small">查看更多</a-button>
                        </div>
                    </Simplebar>
                </template>
                <a-button shape="circle" class="right-btn">
                    <svg-icon name="msg" width="15px" height="15px" />
                </a-button>
            </a-popover>
        </a-tooltip>
    </a-badge>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Simplebar from 'simplebar-vue';
import 'simplebar-vue/dist/simplebar.min.css';

const data = ref([
    {
        title: '续费通知',
        status: 0,
        content: '您的产品使用期限即将截止，如需继续使用产品请前往购把开朗看风景'
    },
    {
        title: '规则开通成功',
        status: 0,
        content: '您的产品使用期限即将截止，如需继续使用产品请前往购把开朗看风景'
    },
    {
        title: '续费通知',
        status: 0,
        content: '您的产品使用期限即将截止，如需继续使用产品请前往购把开朗看风景'
    },
    {
        title: '规则开通成功',
        status: 0,
        content: '您的产品使用期限即将截止，如需继续使用产品请前往购把开朗看风景'
    },
]);

//模拟修改消息状态
const handleUpdate = (item, index) => {
    data.value[index].status = data.value[index].status === 1 ? 0 : 1;
}

//模拟清空消息
const handleClear = () => {
    data.value = [];
}

//模拟全部已读
const handleAllRead = () => {
    data.value.forEach(item => {
        item.status = 1;
    })
}
</script>
<style scoped lang='scss'>
.scrollbarWrap {
    height: 220px;
    width: 400px;
}

.msg-footer {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around
}

p {
    //超出宽度时文本省略
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding: 6px 0 0 0;
}
</style>